<template>
  <vue-office-docx :style="{'font-size':' 14px'}" :src="docxurl + item"  @rendered="rendered" />
</template>
  
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

export default {
  props: ['item'],
  components: {
    VueOfficeDocx
  },
  
  computed: {
    docxurl() {
      return window.location.origin + '/'
    }
  },
  methods: {
    rendered() {

      console.log("渲染完成")
    }
  },
  watch: {
    'item': function (new1, old) {
      this.docx = window.location.origin + "/" + new1
    }
  }
}
</script> 
<style lang="less" scoped>
::-webkit-scrollbar{
    list-style: none;
}
.vue-office-docx /deep/ .docx-wrapper {
    width: 99%;
    height: 100%;
    padding: 0px !important;
    display: flex;
    flex-flow: none !important;
    align-items: none !important;
    overflow:auto;
}

.docx {
	padding: 0px !important;
	min-height: 100% !important;
	column-count: 1;
	column-gap: 21.25pt;
    width: 100% !important;

	height: 100% !important;
}

.vue-office-docx,
.vue-office-docx-main {
    height: 100% !important;
}
.vue-office-docx /deep/ .vue-office-docx-main {
    height: 100% !important;
}
.excel-view-container {
    height: 200px;
}

.docx,
article {
    height: 100% !important;
    width: 100% !important;

}

p:nth-child(1) {
    height: 50px;
}

p:nth-child(2) {
    height: 150px;
    overflow: auto;

    span {
        display: inline-block;
        width: 100%;

    }
}
</style>
